<!-- 顶点值设置 -->
<template>
  <div class="echart-vertex">
    <VsFormItem
      prop="vertexValueType"
      :label="$demoi18n('label.title.vertexValue')"
    >
      <span class="help-tip"></span>
      <el-radio v-model="form.vertexValueType" label="maximumValue">{{ $demoi18n('panel.label.maximumValue') }}</el-radio>
    </VsFormItem>
    <VsFormItem
      class="vertex-form"
      prop="vertexValueType"
      label=""
    >
      <span class="help-tip"><Helptip>{{ $demoi18n('panel.labelTip.customUnified') }}</Helptip></span>
      <el-radio
        v-if="form.vertexValueType === 'customUnified'"
        v-model="form.vertexValueType"
        class="custom-unified"
        label="customUnified"
        :title="$demoi18n('panel.label.customUnified')"
      >{{ $demoi18n('panel.label.customUnified') }}</el-radio>
      <el-radio
        v-else
        v-model="form.vertexValueType"
        label="customUnified"
      >{{ $demoi18n('panel.label.customUnified') }}</el-radio>
      <ValueInputer
        v-if="form.vertexValueType === 'customUnified'"
        v-model:value="form.customUnifiedValue"
        valueType="Number"
        :controls="false"
        :min="0"
        :max="100000000"
      ></ValueInputer>
    </VsFormItem>
    <VsFormItem
      class="vertex-form"
      prop="vertexValueType"
      label=""
    >
      <span class="help-tip"><Helptip>{{ $demoi18n('panel.labelTip.customDimension') }}</Helptip></span>
      <el-radio v-model="form.vertexValueType" label="customDimension">{{ $demoi18n('panel.label.customDimension') }}</el-radio>
    </VsFormItem>
    <VsFormItem
      v-if="form.vertexValueType === 'customDimension'"
      label=""
    >
      <el-button
        class="btn-sure"
        size="default"
        icon="CirclePlus"
        @click.stop="addNewRow()"
      >{{ $demoi18n('btn.add') }}</el-button>
    </VsFormItem>
    <VsFormItem
      v-if="form.vertexValueType === 'customDimension'"
      label=""
    >
      <table class="vertex-table">
        <tr v-for="(item, index) in tableDatas" :key="item._randKey">
          <!-- 维度名称 -->
          <td class="vertex-name">
            <ValueInputer v-model:value="item.name" :enumValues="customDimensionOption" />
          </td>
          <!-- 维度最大值 -->
          <td>
            <ValueInputer
              v-model:value="item.max"
              valueType="Number"
              :controls="false"
              :min="0"
              :max="100000000"
            ></ValueInputer>
          </td>
          <!-- 操作 -->
          <td>
            <el-button
              :link="true"
              type="primary"
              icon="Delete"
              size="default"
              @click="deleteRow(tableDatas, index)"
            ></el-button>
          </td>
        </tr>
      </table>
    </VsFormItem>
  </div>
</template>
<script>
import VsFormItem from '@/components/common/vs-form-item/vs-form-item.vue';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import Helptip from '@/components/common/helptip/helptip.vue';
import { addArrRandKey } from '@/utils/util.js';

export default {
  name: 'VertexSetting',
  components: { VsFormItem, ValueInputer, Helptip },
  props: {
    form: Object,
    indicatorList: Array,
  },
  data() {
    return {
      rowObj: { name: '', max: '' },
      tableDatas: [],
      initFlag: false,
    };
  },
  computed: {
    customDimensionOption() {
      const option = [];
      this.form.indicator = JSON.parse(JSON.stringify(this.indicatorList));
      this.indicatorList.forEach(item => {
        option.push({ label: item.name, value: item.name });
      });
      return option;
    },
  },
  watch: {
    tableDatas: {
      deep: true,
      immediate: true,
      handler: function(datas) {
        if (!this.initFlag) {
          return;
        }
        const valArr = [];
        datas.forEach(item => {
          valArr.push({ name: item.name, max: item.max });
        });
        this.form.customDimensionValues = JSON.parse(JSON.stringify(valArr));
      },
    },
  },
  created() {
    this.initTableDatas();
  },
  methods: {
    initTableDatas() {
      this.initFlag = false;
      const tableDatas = JSON.parse(JSON.stringify(this.form.customDimensionValues || []));
      addArrRandKey(tableDatas);
      this.tableDatas = tableDatas;
      this.initFlag = true;
    },
    addNewRow() {
      const item = JSON.parse(JSON.stringify(this.rowObj));
      item._randKey = Date.now();
      this.tableDatas.push(item);
    },
    deleteRow(items, index) {
      items.splice(index, 1);
    },
  },
};
</script>
<style lang="less" scoped>
.echart-vertex {
  .custom-unified {
    margin-right: unset;
    width: calc(100% - 100px);
    :deep(.el-radio__label) {
      margin-right: 5px;
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .vertex-form {
    position: relative;
  }

  .help-tip {
    margin-top: 5px;
    position: absolute;
    left: -24px ;
  }

  .vertex-table {
    .vertex-name {
      .value-inputer {
        width: 110px;
      }
    }
  }
}
</style>
